<template>
  <div class="index">
    <header>
      <h1>数据可视化-ECharts</h1>
      <div class="showTime">{{ gettime }}</div>
    </header>
    <div class="main-content">
      <section>
        <div class="column left">
          <div class="panel bar">
            <h2>柱形图-就业</h2>
            <barECharts class="chart" :barData="barData"></barECharts>
            <div class="panel-footer"></div>
          </div>
          <div class="panel line">
            <h2>折线图-人员变化</h2>
            <lineEChart class="chart"></lineEChart>
            <div class="panel-footer"></div>
          </div>
          <div class="panel pie">
            <h2>饼形图-年龄分布</h2>
            <pieEChart class="chart"></pieEChart>
            <div class="panel-footer"></div>
          </div>
        </div>
        <div class="column">
          <div class="no">
            <div class="no-hd">
              <ul>
                <li>12345</li>
                <li>54321</li>
              </ul>
            </div>
            <div class="no-bd">
              <ul>
                <li>前端需求人数</li>
                <li>市场供应人数</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="column left">
          <div class="panel bar2">
            <h2>柱形图-技能掌握</h2>
            <WorldPopulation class="chart" :barData="barData"></WorldPopulation>
            <div class="panel-footer"></div>
          </div>
          <div class="panel line2">
            <h2>折线图-播放量</h2>
            <lineECharts class="chart"></lineECharts>
            <div class="panel-footer"></div>
          </div>
          <div class="panel pie2">
            <h2>饼形图-地区分布</h2>
            <pieECharts class="chart"></pieECharts>
            <div class="panel-footer"></div>
          </div>
        </div>
      </section> 
      <Bmap class="map"></Bmap>  
    </div>
  </div>
</template>

<script>
import barECharts from "@/views/Bar/barEChart.vue";
import WorldPopulation from "@/views/Bar/barEChart2.vue";
import lineEChart from "@/views/line/lineEChart.vue";
import lineECharts from "@/views/line/lineEChart2.vue";
import pieEChart from "@/views/pie/pieEChart.vue";
import pieECharts from "@/views/pie/pieECharts.vue";
import Bmap from "@/views/Bmap.vue";
export default {
  data() {
    return {
      gettime: "",

      barData: {
        nameArray: {
          name1: [
            "旅游行业",
            "教育培训",
            "游戏行业",
            "医疗行业",
            "电商行业",
            "社交行业",
            "金融行业",
          ],
        },
        data1: [
          { value: 200, name: "旅游行业" },
          { value: 300, name: "教育培训" },
          { value: 300, name: "游戏行业" },
          { value: 900, name: "医疗行业" },
          { value: 1500, name: "电商行业" },
          { value: 1200, name: "社交行业" },
          { value: 600, name: "金融行业" },
        ],
      },
    };
  },
  components: {
    barECharts,
    WorldPopulation,
    lineEChart,
    lineECharts,
    pieEChart,
    pieECharts,
    Bmap,
  },
  mounted() {
    this.Date();
  },
  methods: {
    Date() {
      const nowDate = new Date();
      const date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
        hours: nowDate.getHours(),
        minutes: nowDate.getMinutes(),
        seconds: nowDate.getSeconds(),
      };
      const newmonth = date.month > 10 ? date.month : "0" + date.month;
      const newday = date.date > 10 ? date.date : "0" + date.date;
      const newminutes = date.minutes > 10 ? date.minutes : "0" + date.minutes;
      const newseconds = date.seconds > 10 ? date.seconds : "0" + date.seconds;
      this.gettime =
        date.year +
        "年" +
        newmonth +
        "月" +
        newday +
        "日" +
        date.hours +
        ":" +
        newminutes +
        ":" +
        newseconds;
    },
  },
};
</script>

<style lang="scss" scoped>
header {
  position: relative;
  height: 1.25rem;
  background: url(../assets/images/head_bg.png) no-repeat top center;
  background-size: 100% 100%;
  background-color:  rgba(101, 132, 226, 0.5);;
  h1 {
    line-height: 1rem;
    text-align: center;
    color: #fff;
    font-size: 0.475rem;
  }
  .showTime {
    position: absolute;
    right: 0.375rem;
    top: 0;
    line-height: 0.9375rem;
    color: rgba(255,255,255,.7);
    font-size: 0.25rem;
  }
}
section {
  position: absolute;
  display: flex;
  width: 100%;
  z-index: 999;
  margin: 0 auto;
  padding: 0.125rem 0.125rem 0;
  pointer-events: none;
  .column {
    position: relative;
    flex: 3;
    &:nth-child(2) {
      flex: 5;
      margin: 0 0.125rem 0.1875rem;
    }
    .panel {
      position: relative;
      width: 100%;
      // height: 100%;
      border: 1px solid rgba(25, 186, 139, 0.17);
      padding: 0 0.1875rem 0.5rem;
      margin-bottom: 0.1875rem;
      background: rgba(247, 238, 237, 0.4);
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: .125rem;
        height: .125rem;
        border-left: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;
        content: "";
      }
      &::after {
        position: absolute;
        top: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;
        content: "";
      }
      .panel-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        &::before {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 10px;
          height: 10px;
          border-left: 2px solid #02a6b5;
          border-bottom: 2px solid #02a6b5;
          content: "";
        }
        &::after {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 10px;
          height: 10px;
          border-right: 2px solid #02a6b5;
          border-bottom: 2px solid #02a6b5;
          content: "";
        }
      }
      h2 {
        height: 0.6rem;
        // color: #fff;
        line-height: 0.6rem;
        text-align: center;
        font-size: 0.25rem;
      }
      .chart {
        // pointer-events: none;
        height: 3rem;
        background: rgba(101, 132, 226, 0.5);
      }
    }
  .no {
    background: rgba(101, 132, 226, 0.6);
    padding: 0.1875rem;
    .no-hd {
      position: relative;
      border: 1px solid rgba(25, 186, 139, 0.17);
      &::before {
        content: "";
        position: absolute;
        width: 30px;
        height: 10px;
        border-top: 2px solid #02a6b5;
        border-left: 2px solid #02a6b5;
        top: 0;
        left: 0;
      }
      &::after {
        content: "";
        position: absolute;
        width: 30px;
        height: 10px;
        border-bottom: 2px solid #02a6b5;
        border-right: 2px solid #02a6b5;
        right: 0;
        bottom: 0;
      }
      ul {
        display: flex;
        li {
          position: relative;
          flex: 1;
          text-align: center;
          height: 1rem;
          line-height: 1rem;
          font-size: 0.875rem;
          color: #ffeb7b;
          padding: 0.05rem 0;
          font-family: electronicFont;
          font-weight: bold;
          &:first-child::after {
            content: "";
            position: absolute;
            height: 50%;
            width: 1px;
            background: rgba(255, 255, 255, 0.2);
            right: 0;
            top: 25%;
          }
        }
      }
    }
    .no-bd ul {
      display: flex;
      li {
        flex: 1;
        height: .5rem;
        line-height: .5rem;
        text-align: center;
        font-size: 0.225rem;
        color: rgba(255, 255, 255, 0.7);
        padding-top: 0.125rem;
      }
    }
  }
  }

}

.main-content {
  position: relative;
  width: 100%;
}
.map {
  position:relative;
  // z-index: -1;
  width: 100%;
  height: 100vh;
}
.left{
  pointer-events: auto;
}
</style>
